import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false
import './css/base.css'

// 导入组件
import Find from "./views/Find.vue"
import My from "./views/My.vue"
import Part from "./views/Part.vue"
import NotFound from "./views/NotFound.vue"

import Recommend from './views/second/Recommend.vue'
import Ranking from './views/second/Ranking.vue'
import SongList from './views/second/SongList.vue'

//1.下包,引入vue-router
import VueRouter from "vue-router";
// 2.使用Vue.use安装插件
Vue.use(VueRouter);
// 3.创建路由规则数组
const routes = [
  /*
    一个对象是一个规则
    规则对象中两个核心属性:path-路径,component-组件
    访问指定路径,切换为对应组件
    redirect   重定向,传入路径字符串即可,不是传组件  
   */
  {
    path: "/",
    redirect: "/find",
  },
  {
    path: "/find",
    component: Find,
    name: 'Find',
    children: [{
        path: 'recommend',
        component: Recommend
      },
      {
        path: 'ranking',
        component: Ranking
      },
      {
        path: 'songlist',
        component: SongList
      },
    ]
  },
  {
    path: "/my",
    component: My,
    name: 'My'
  },
  {
    path: "/part",
    component: Part,
    name: 'Part'
  },
  {
    path: "*",
    component: NotFound,
  },
];
const router = new VueRouter({
  routes,
  mode: "hash",
});
let isLogin = true
/* 
路由权限控制: 全局 前置 导航守卫
router.beforeEach() 注册全局前置守卫, 一旦注册, 所有路由跳转都会经过它
注意事项: 只要注册了全局前置守卫, 必须执行 next() 否则路由系统会瘫痪
参数1: to 到哪里去
参数2: from 从哪里来
参数3: next 函数, 不传参执行表示放行, 传入 false 执行表示阻止
 */
router.beforeEach((to, from, next) => {
  if (!isLogin && to.path === '/my') {
    alert('不要再点啦,你还没有登录哦,真的超笨的诶')
    // 强行跳转至朋友页面
    // 加上return,否则继续往后走就放行了
    return next('/part')
  }
  next()
})
new Vue({
  render: (h) => h(App),
  router,
}).$mount('#app')